/*
  学习目标: Route组件使用说明
*/

import React, { Component } from 'react';
import './index.css';
import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom';
export default class App extends Component {
  render() {
    return (
      <Router>
        <NavLink to="/home/123" activeClassName="xxx" exact>
          点我调到首页
        </NavLink>
        <br />
        <NavLink to="/my">点我调到我的</NavLink>
        <br />
        <NavLink to="/friend">点我调到朋友</NavLink>
        <div>
          {/* 1. path的作用， 跟url进行匹配。匹配成功显示组件，匹配不成功返回null */}
          {/* 2. 💥默认情况下， Route组件从上向下，依次匹配，不会停止 */}
          {/* 3. Route组件也有exact属性，规则等同于NavLink */}
          {/* 4. 两种匹配任意路径的写法*/}
          {/* 
            4.1 path= "/" 模糊匹配任意路径， 🔔通常和exact配合使用
            4.2 不写path 模糊匹配任意路径，💥设置exact无效 类似通配符*， 匹配任意路径
          */}
          <Route path="/home" component={Home}></Route>

          <Route path="/my" component={MyMusic}></Route>
          <Route path="*" component={MyMusic} exact></Route>
          <Route path="/friend" component={Friend}></Route>
        </div>
      </Router>
    );
  }
}

function Home() {
  return <h1>我是首页组件</h1>;
}

function MyMusic() {
  return <h1>我是我的音乐件</h1>;
}

function Friend() {
  return <h1>我是朋友组件</h1>;
}

// Route组件未匹配上是, 渲染一个null
// Route组件不会默认停止匹配, 从上向下依次匹配
// Route组件同样有exact 表示精准匹配
// 表示任意路径: path="/" 通常要和exact  不写path, 写exact无效
